<template>
	<view class="container">
		<!-- 头部导航 -->
		<view class="header">
			<!-- 返回按钮 -->
			<view class="iconfont icon-fanhui fanhui" @click="returnBtn"></view>
			<view class="text">我的订单</view>
			<!-- 跳转搜索按钮 -->
			<view class="icon-sousuo iconfont search" @click="searchBtn()"></view>
			<!-- 跳转购物车按钮 -->
			<view class="icon-gouwuche iconfont shopping" @click="shopBtn()"></view>
			<!-- 购物车角标 -->
			<view class="corner" v-if="getShopNumber != 0">
				<view class="text">{{getShopNumber}}</view>
			</view>
		</view>
		<!-- 导航栏 -->
		<view class="navbar">
			<view @click="tabClick(index)" class="nav-item" :class="{'active': tabCurrentIndex === index}" v-for="(navItem,index) in navList" :key='index'>
				{{navItem.text}}
			</view>
		</view>
		<!-- 主内容 -->
		<swiper :current="tabCurrentIndex" class="swiper-box" duration="300" @change="changeTab">
			<!-- 导航标签列表 -->
			<swiper-item class="tab-content" v-for="(item, index) in navList" :key='index'>
				<!-- 标签列表内容 -->
				<scroll-view class='list-content' scroll-y @scrolltolower='loadData'>
					<view class="item-content">
						<!-- 空订单 -->
						<!-- 当加载过数据,数据列表还是空的时候显示 -->
						<empty 
						v-if="item.loaded === true && item.orderList.length === 0"
						:state='item.state'
						:likeData='likeData'
						></empty>
						
						<!-- 订单 -->
						<order-comp 
						v-for="(order,i) in item.orderList" 
						:key='i'
						:order='order'
						:index='i'
						@onClick='clickBtn'
						></order-comp>
						
						<!-- 猜你喜欢 -->
						<like-comp 
						v-if="item.loaded === true && item.orderList.length === 0"
						:likeData="likeData"></like-comp>
						
						<!-- 底线 -->
						<line-comp v-if="item.loadingType === 'noMore'"></line-comp>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
		<!-- 弹窗 -->
		<uni-popup ref="popup" type="dialog">
			<uni-popup-dialog type="warn" :content="content" :title="title" @close="close" @confirm="confirm"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import orderComp from '../../components/orderComp/orderComp.vue'
	import empty from '../../components/emptyComp/emptyComp.vue'
	import lineComp from '../../components/lineComp/lineComp.vue'
	import likeComp from '../../components/likeComp/likeComp.vue'
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
	
	import { mapGetters } from 'vuex'
	
	export default {
		components:{
			orderComp,
			empty,
			lineComp,
			likeComp,
			uniPopup,
			uniPopupDialog
		},
		data() {
			return {
				// 导航索引
				tabCurrentIndex: 0,
				likeData: null,
				// 导航列表
				navList: [{
						state: 0,
						text: '全部', // 导航文本
						// loadingType状态
						// more = 还有数据
						// loading = 数据加载中
						// noMore = 已加载全部数据
						loadingType: 'more',
						orderList: [] ,// 订单数据列表,
						loaded: false // 是否加载过数据
					},
					{
						state: 1,
						text: '待付款',
						loadingType: 'more',
						orderList: [],
						loaded: false
					},
					{
						state: 2,
						text: '待收货',
						loadingType: 'more',
						orderList: [],
						loaded: false
					},
					{
						state: 3,
						text: '待评价',
						loadingType: 'more',
						orderList: [],
						loaded: false
					}
				],
				orderIndex: 0, // 订单数据索引
				content: '', // 弹窗内容
				title: '' // 弹窗标题
			};
		},
		computed:{
			...mapGetters('shopping', ['getShopNumber'])
		},
		methods: {
			// 加载数据
			loadData(source){
				let index = this.tabCurrentIndex;
				let navItem = this.navList[index];
				let state = navItem.state;
				// 如果数据已经全部加载完或者正在加载中则返回
				if(navItem.loadingType == 'noMore' || navItem.loadingType == 'loading') {
					return;
				}
				// 判断是不是切换加载的,如果是判断是否有加载过
				if(source === 'swict' && navItem.loaded){
					return;
				}
				
				navItem.loadingType = 'loading';
				
				uni.showLoading({
					title: '加载中'
				})
				
				// 模拟请求数据
				setTimeout(async () => {
					let orderList = await this.$api('orderTotal');
					
					// 如果没有订单数据则加载猜你喜欢数据
					if(orderList == null || orderList.length === 0){
						this.likeData = await this.$api('likeData');
						navItem.loadingType = 'noMore'; // 没数据了
					}else{
						// 注入新属性和过滤数据
						orderList = orderList.filter((order) => {
							// 注入属性
							order = Object.assign(order, this.injectAttr(order));
							// 过滤数据
							// state状态
							// 1 = 待付款 = 显示取消/修改/付款按钮
							// 2 = 待收货 = 不显示按钮
							// 3 = 已收货 = 显示取消/评价按钮
							if(state === 0){
								// 索引0返回全部数据
								return order;
							}
							return order.state === state
						})
						navItem.orderList = [...navItem.orderList, ...orderList];
						navItem.loadingType = 'more'; // 还有数据
					}
					navItem.loaded = true; // 已加载过数据
					uni.hideLoading();
				}, 600)
			},
			// 注入一个订单的总金额/总数量/订单状态等属性
			injectAttr(order){
				let totalPrice = 0,
					totalNum = 0,
					stateText;
				switch(+order.state) {
					case 1: 
						stateText = '待付款';
					break;
					case 2: 
						stateText = '待收货';
					break;
					case 3: 
						stateText = '已收货';
					break;
				};
				order.list.forEach(item => {
					totalPrice += +item.price * +item.number;
					totalNum += +item.number
				})
				totalPrice = totalPrice.toFixed(2); // 保留两位小数
				return {
					totalPrice,
					totalNum,
					stateText
				}
			},
			// 点击切换tab
			tabClick(index){
				this.tabCurrentIndex = index;
				this.loadData('swict');
			},
			// 滑动切换
			changeTab(e){
				this.tabCurrentIndex = e.target.current;
				this.loadData('swict');
			},
			// 返回按钮
			returnBtn(){
				uni.navigateBack();
			},
			// 搜索跳转按钮
			searchBtn(){
				uni.navigateTo({
					url: '../search/search'
				})
			},
			// 购物车跳转按钮
			shopBtn(){
				uni.switchTab({
					url: '../shopping/shopping'
				})
			},
			// 点击按钮
			// type = 点击类型
			// index = 索引
			// order = 点击源
			clickBtn({type, index, order}){
				switch(type){
					// 取消事件
					case 'clone': 
						this.orderIndex = index;
						this.content = '您确定要取消订单吗？';
						this.title = '取消订单';
						this.$refs.popup.open();
					break;
					// 删除事件
					case 'remove':
						this.orderIndex = index;
						this.content = '您确定要删除订单吗？';
						this.title = '删除订单';
						this.$refs.popup.open();
					break;
					// 修改事件
					case 'update':
						
					break;
					// 付款事件
					case 'payment':
						
					break;
					// 查看事件
					case 'info':
						
					break;
					// 评价事件
					case 'evaluate':
						
					break;
				}
				uni.showToast({
					title: type,
					icon: 'none'
				})
			},
			// 弹窗取消按钮
			close(done){
				done();
			},
			// 弹窗确定按钮
			confirm(done){
				// 确定取消后移除数据
				let index = this.tabCurrentIndex,
					i = this.orderIndex;
				// 根据索引从数据中移除一项
				this.navList[index].orderList.splice(i, 1);
				done();
			}
		},
		onLoad(options){
			this.tabCurrentIndex = +options.current || 0;
			this.loadData();
		}
	}
</script>

<style lang="scss">
	// 容器
	.container{
		background: $bg-color;
		padding-top: var(--status-bar-height);
		height: calc(100vh - var(--status-bar-height));
	}
	// 头部导航
	.header {
		height: 100rpx;
		box-sizing: border-box;
		display: flex;
		position: relative;
		align-items: center;
		text-align: center;
		font-size: 30rpx;
		border-bottom: 1px solid $shallow-border;
		padding: 30rpx 0;
		color: $shallow-font;
		.fanhui {
			position: absolute;
			left: 30rpx;
		}
		.text {
			margin: 0 auto;
			color: $deep-font;
		}
		.search{
			position: absolute;
			right: 100rpx;
		}
		.shopping{
			position: absolute;
			right: 30rpx;
		}
		.corner{
			position: absolute;
			right: 16rpx;
			top: 24rpx;
			background: $stop-color;
			height: 25rpx;
			line-height: 25rpx;
			width: 25rpx;
			border-radius: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			.text{
				font-size: 16rpx;
				color: $white-font;
				/* #ifdef H5 */
				transform: scale(.7);
				transform-origin:55% 40%;
				/* #endif */
			}
		}
	}
	// 导航栏
	.navbar{
		display: flex;
		background: $bg-white;
		justify-content: space-around;
		height: 60rpx;
		margin-bottom: 15rpx;
		.nav-item{
			height: 100%;
			line-height: 60rpx;
			font-size: 30rpx;
			margin: 0 30rpx;
			color: $shallow-font;
			// padding: 10rpx 0;
			
			&.active{
				color: $stop-color;
				border-bottom: 1px solid $stop-color;
			}
		}
	}
	// 主区域
	.swiper-box{
		height: calc(100% - 175rpx);
		.list-content{
			height: 100%;
			.item-content{
				height: 200rpx;
			}
		}
	}
</style>
